<template>
	<view class="content">
		<view class="sta">
			<h3 class="status" :style="{'color': status === '在线' ? '#00ff00' : '#ff0000'}">当前状态：{{status}}</h3 >
		</view>
		<view class="put">
			<uni-easyinput v-model.number="num" focus placeholder="输入想要增加的数值"></uni-easyinput>
		</view>
		<view class="buts">
			<button class="btn" @click="changeData()">更新数据</button>
			<button class="btn" @click="getStatus()">刷新状态</button>
		</view>
	</view>
</template>

<script>
	
	const baseUrl = "https://data.xiaohong.work/websocket"
	let _self
	
	export default {
		data() {
			return {
				num: '',
				status: '离线'
			}
		},
		onLoad() {
			_self = this
		},
		methods: {
			changeData(){
				
				if(_self.status !== '在线'){
					uni.showToast({
						title: '当前不在线哦！请刷新状态后重试',
						duration: 2000,
						icon: "none"
					});
					return
				}
				uni.request({
				    url: baseUrl+'/server/send',
				    data: {
						receiver: "888",
				        message: _self.num
				    },
				    success: (res) => {
				        uni.showToast({
				        	title: '发送成功！',
				        	duration: 2000
				        });
				    },fail(err) {
				    	uni.showToast({
				    		title: '请求发送失败！',
				    		duration: 2000,
							icon: "none"
				    	});
				    }
				});
			},
			
			getStatus(){
				uni.request({
				    url: baseUrl+'/status/888',
				    data: {
				    },
				    success: (res) => {
				        if(res.data.code == 20000){
							_self.status = res.data.data
							uni.showToast({
								title: '刷新成功！',
								duration: 2000
							});
						}else{
							uni.showToast({
								title: '请求发送失败！',
								duration: 2000,
								icon: "none"
							});
						}
				    },fail(err) {
				    	uni.showToast({
				    		title: '请求发送失败！',
				    		duration: 2000,
							icon: "none"
				    	});
				    }
				});
			},
			
			
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		height: 800rpx;
		padding: 100rpx 10rpx;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	
	
	.input {
		margin: 50rpx 0;
		border: 1px solid #333333;
		width: 80%;
	}
	
	.buts {
		display: flex;
		flex-direction: row;
		margin-top: 50rpx;
		justify-content: space-between;
		width: 80%;
	}
	
</style>
